<script>
import { onMounted } from 'vue'
import Typed from 'typed.js'

export default {
  props: {
    data: {
      type: Array,
      required: true,
      validator: function(value) {
        return value.every(function(item) {
          return typeof item === 'string'
        })
      }
    }
  },
  setup: function(props) {
    onMounted(function() {
      if (props.data && props.data.length) {
        var options = {
          strings: props.data,
          typeSpeed: 100,
          backSpeed: 30,
          loop: true
        }
        new Typed('#typed', options)
      }
    })

    return {}
  }
}
</script>

<template>
  <slot></slot>
</template>

<style scoped lang="scss"></style>